<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <title>添加产品</title>
    <style>
       /* .required{
            width: 250px;
        }*/
        .kong{
            width: 600px;
        }
    </style>
    <link type="text/css" rel="stylesheet" th:href="@{/static/qrcodes.css}" />
    <link rel="stylesheet" th:href="@{/static/table/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/static/jquery-upload/css/jquery.fileupload.css}">
    <link rel="stylesheet" th:href="@{/static/jquery-upload/css/jquery.fileupload-ui.css}">
    <script th:src="@{/static/jquery3.js}"></script>
    <script th:src="@{/static/jquery-form.js}"></script>
<!--    <link type="text/css" rel="stylesheet" th:href="@{/static/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css}" />
    <script th:src="@{/static/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js}"></script>
    <script th:src="@{/static/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js}"></script>-->

    <script th:src="@{/static/jquery-upload/js/vendor/jquery.ui.widget.js}"></script>
    <script th:src="@{/static/jquery-upload/js/jquery.iframe-transport.js}"></script>
    <script th:src="@{/static/jquery-upload/js/jquery.fileupload.js}"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            //为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
            $("#productForm :input.required").each(function () {
                //通过jquery api：$("HTML字符串") 创建jquery对象
                var $required = $("<span><strong style='color:red;display:inline-block'>*</strong></span>");
                //添加到this对象的父级对象下
                $(this).parent().append($required);
            });

            $("#productFormSubmitButton").click(function () {
                var valid = true;
                $("#productForm :input.required").each(function () {
                    var val = $.trim($(this).val());
                    if (val.length == 0){
                        label = $(this).parent().prev().children().html();
                        alert(label+"不能为空！");
                        $(this).focus();
                        valid = false;
                        return false;
                    }
                });
                if(!valid) return false;

                imgNum0 = $("#imgDiv0").find("img").length;
                imgNum1 = $("#imgDiv1").find("img").length;
                imgNum2 = $("#imgDiv2").find("img").length;

                logoVal = $("#logoId").val();
                if(imgNum0 == 0){
                    alert("请上传产品logo！");
                    valid = false;
                    return false;
                }
                productCertVal = $("#productCertId").val();
                if(imgNum1 == 0){
                    alert("请上传产品证书！");
                    valid = false;
                    return false;
                }
                productImgVal = $("#productImgId").val();
                if(imgNum2 == 0){
                    alert("请上传产品图片！");
                    valid = false;
                    return false;
                }
                if(valid){
                    $("#productForm").submit();
                }

            });

            $("#backButton").click(function(){
                window.location.href='[[${#request.getContextPath()}]]/product/toFindAll';
            })


            $('#productImg').fileupload({
                url: '[[${#request.getContextPath()}]]/product/upload',
                messages : {//文件错误信息
                    maxNumberOfFiles:"超出最大上传文件数",
                    acceptFileTypes: '不允许的文件类型',
                    maxFileSize: '文件过大',
                    minFileSize: '文件过小'
                },
                //上传完成之后的操作，显示在img里面
                done: function (e, data){
                    //$("#imgDiv2").empty();
                    $("#imgDiv2").append('<div style="margin-top: 20px;border:1px solid #5a44593d;width: 70%;"><img src="[[${#request.getContextPath()}]]/'+data.result.picAccessPath+'" style="width:137px;height:70px;margin-right:80px"/> ' +
                        '<button class="btn btn-warning cancel" onclick="delPic(this)"> <i class="glyphicon glyphicon-ban-circle"></i><span>取消</span> </button></div>');
                    $("#imgDiv2").show();
                    var value= $("#productImgId").val();

                    var newValue = (value == null || value == "") ? "" +data.result.picPath : value+","+data.result.picPath;
                    $("#productImgId").val(newValue+"&" +data.result.width+"&" +data.result.height);
                    //$("#productImgDiv").append($("#productImg"))
                    console.log($("#productImgId").val())
                }
            });



            $('#logo').fileupload({
                url: '[[${#request.getContextPath()}]]/product/upload',
                messages : {//文件错误信息
                    maxNumberOfFiles:"超出最大上传文件数",
                    acceptFileTypes: '不允许的文件类型',
                    maxFileSize: '文件过大',
                    minFileSize: '文件过小'
                },
                //上传完成之后的操作，显示在img里面
                done: function (e, data){
                    $("#imgDiv0").append('<div style="margin-top: 20px;border:1px solid #5a44593d;width: 70%;"><img src="[[${#request.getContextPath()}]]/'+data.result.picAccessPath+'" style="width:137px;height:70px;margin-right:80px"/> ' +
                        '<button class="btn btn-warning cancel" onclick="delPic(this)"> <i class="glyphicon glyphicon-ban-circle"></i><span>取消</span> </button></div>');
                    $("#imgDiv0").show();
                    var value= $("#logoId").val();

                    var newValue = (value == null || value == "") ? "" +data.result.picPath : value+","+data.result.picPath;
                    $("#logoId").val(newValue+"&" +data.result.width+"&" +data.result.height);
                }
            });

            $('#productCert').fileupload({
                url: '[[${#request.getContextPath()}]]/product/upload',
                messages : {//文件错误信息
                    maxNumberOfFiles:"超出最大上传文件数",
                    acceptFileTypes: '不允许的文件类型',
                    maxFileSize: '文件过大',
                    minFileSize: '文件过小'
                },
                //上传完成之后的操作，显示在img里面
                done: function (e, data){
                    $("#imgDiv1").append('<div style="margin-top: 20px;border:1px solid #5a44593d;width: 70%;"><img src="[[${#request.getContextPath()}]]/'+data.result.picAccessPath+'" style="width:137px;height:70px;margin-right:80px"/> ' +
                        '<button class="btn btn-warning cancel" onclick="delPic(this)"> <i class="glyphicon glyphicon-ban-circle"></i><span>取消</span> </button></div>');
                    $("#imgDiv1").show();
                    var value= $("#productCertId").val();

                    var newValue = (value == null || value == "") ? "" +data.result.picPath : value+","+data.result.picPath;
                    $("#productCertId").val(newValue+"&" +data.result.width+"&" +data.result.height);
                }
            });

        });

        $(function () {
            $('#datetimepicker').datetimepicker(
                {
                    bootcssVer:3,
                    language:  'zh-CN',
                    minView:0,
                    todayBtn : true,
                    autoclose:true,
                    minuteStep:1,
                    format:'yyyy-mm-dd hh:ii',
                    //pickerPosition:'top-right'//日期插件弹出的位置
                });
        })



    </script>

    <script  type="text/javascript">
         function delPic(thiss){
          var productId=$("#myProductId").val();
             var picId = $(thiss).parent().find("img").eq(0).attr("value");
             if(productId == null || productId == '' || picId ==undefined){

                 var productCertId=$("#productCertId").val();
                 var productImgId=$("#productImgId").val();
                 var logoId=$("#logoId").val();

                 var index = $(thiss).parent().find("img").eq(0).attr("src").indexOf('static');
                 var url = $(thiss).parent().find("img").eq(0).attr("src").substring(index);

                 var productCertIds = productCertId.split(",");
                 var newProductCertId = '';
                 for(var i=0;i<productCertIds.length;i++){
                     if(productCertIds[i].indexOf(url) == -1){
                         newProductCertId += productCertIds[i]+',';
                     }
                 }

                 var productImgIds = productImgId.split(",");
                 var newProductImgId= '';
                 for(var i=0;i<productImgIds.length;i++){
                     if(productImgIds[i].indexOf(url) == -1){
                         newProductImgId += productImgIds[i] + ',';
                     }
                 }

                 var logoIds = logoId.split(",");
                 var newLogoId= '';
                 for(var i=0;i<logoIds.length;i++){
                     if(logoIds[i].indexOf(url) == -1){
                         newLogoId += logoIds[i]+',';
                     }
                 }


                 $("#productCertId").val(newProductCertId);
                 $("#productImgId").val(newProductImgId);
                 $("#logoId").val(newLogoId);


                 $(thiss).parent().remove();
             }else{
                 $.post("[[${#request.getContextPath()}]]/product/deletePic?picId="+picId,function(data){
                     if(data == 1){
                         $(thiss).parent().remove();
                     }else{
                         alert("删除图片失败")
                     }
                 })
             }
      }
    </script>
</head>
<body>
<form id="uploadForm" enctype="multipart/form-data" method="post" style="display: none;">
</form>
<div class = "pg_header">
    <span class="pg_dl" id="i77" th:align="center">添加产品</span>
</div>
<form th:action="@{${product.productId==null}? '/product/add' : '/product/update'}" method="post" id="productForm">
    <input type="hidden"  th:if="${product.productId} ne null" id="myProductId" name="productId" th:value="${product.productId}"/>
    <input type="hidden" id="productCertId" name="productCert"/>
    <!--<input type="hidden" id="productImgId" name="productImg" th:value="${product.productImg}"/>-->
    <input type="hidden" id="productImgId" name="productImg"/>
    <input type="hidden" id="logoId" name="logo" />
    <div class="left"></div>
    <div class="pg_body">
    <div class="menu">
        <!--/*@thymesVar id="error" type=""*/-->
        <span id="basic-addon0">&nbsp;</span>
    </div>
    <div class="kong">

        <span style="font-size: 12px;color: red" th:text="${error}" aria-describedby="basic-addon0"></span>

        <br />
    </div>
    <div class="menu">
        <span id="basic-addon7">品牌</span>
    </div>
    <div class="kong">


        <select class="required" id="brandId" name="brandId" aria-describedby="basic-addon7">
            <option  th:selected="${product.brandId eq c.brandId}" th:each="c:${brands}"  th:value="${c.brandId}" th:text="${c.brandName}" ></option>
        </select>


    </div>
    <br />
    <div class="menu">
        <span id="basic-addon8">厂商</span>
    </div>
    <div class="kong">
        <select class="required" id="factoryId" name="factoryId" aria-describedby="basic-addon8" >
            <option  th:selected="${product.factoryId eq c.factoryId}" th:each="c:${factories}"  th:value="${c.factoryId}" th:text="${c.factoryName}" ></option>
        </select>
    </div>
    <br />
    <div class="menu">
        <span id="basic-addon1">产品编号</span>
    </div>
    <div class="kong">
        <input th:if="${product.productId} eq null" class="required" id="productId" name="productId" th:value="${product.productId}" type="text" placeholder="产品编号" aria-describedby="basic-addon1" />
        <!--<h3 th:if="${product.productId} ne null" th:text="${product.productId}"></h3>-->
        <input th:if="${product.productId} ne null"  th:value="${product.productId}" type="text" aria-describedby="basic-addon1" readonly/>
    </div>
    <br />
    <div class="menu">
        <span id="basic-addon2">产品名称</span>
    </div>
    <div class="kong">
        <input class="required" id="productName" name="productName" th:value="${product.productName}" type="text" placeholder="产品名称" aria-describedby="basic-addon2" />
    </div>
    <br />
    <div class="menu">
        <span id="basic-addon3">产品规格</span>
    </div>
    <div class="kong">
        <input class="required" id="productStandard" name="productStandard" th:value="${product.productStandard}" type="text" placeholder="产品规格" aria-describedby="basic-addon3" />
    </div>
    <br />
    <!--<div class="menu">
        <span id="basi9">保质期至</span>
    </div>
    <div class="kong">
        <input id="datetimepicker" name="productStandard" type="text" />
    </div>
    <br />-->
    <div class="menu">
        <span id="basic-addon00">产品logo</span>
    </div>
    <div class="kong">
        <div id="logoDiv">
           <!-- <input   style="margin-bottom: 2%;" id="logo" name="logoTemp" type="file" capture="camera" aria-describedby="basic-addon6" onchange="logoUpload()"/>-->
            <span class="btn btn-success fileinput-button" style="color: #fff;background-color: #5cb85c;border-color: #4cae4c;">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>添加文件...</span>
                    <input  style="margin-bottom: 2%;" id="logo" name="logoTemp"  type="file" capture="camera" aria-describedby="basic-addon4" />
             </span>
        </div>

        <div th:if="${product.productId} eq null" id="imgDiv0" style="display: none;"></div>

        <div th:if="${product.productId} ne null" id="imgDiv0" style="display: block;">
            <div th:each="prod : ${product.logoList}">
                <div style="margin-top: 20px;border:1px solid #5a44593d;width: 70%;">
                    <img th:src="${#request.getContextPath()+'/'+staticAccessPath}+${prod.picUrl}" style="width:137px;height:70px;margin-right:80px" th:value="${prod.picId}"/>
                    <!--<button type="button" class="btn btn-warning cancel" onclick="delPic(this)"> <i class="glyphicon glyphicon-ban-circle"></i><span>取消</span> </button>-->
                    <button type="button" onclick="delPic(this)" class="btn btn-warning cancel" > <i class="glyphicon glyphicon-ban-circle"></i> <span>取消</span> </button>
                </div>
            </div>
        </div>
    </div>
    <br />

    <div class="menu">
        <span id="basic-addon6">产品证书</span>
    </div>
    <div class="kong">
        <div id="productCertDiv">
            <!--<input   style="margin-bottom: 2%;" id="productCert" name="productCertTemp" type="file" capture="camera" aria-describedby="basic-addon6" onchange="certUpload()"/>-->
            <span class="btn btn-success fileinput-button" style="color: #fff;background-color: #5cb85c;border-color: #4cae4c;">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>添加文件...</span>
                    <input  style="margin-bottom: 2%;" id="productCert" name="productCertTemp"  type="file" capture="camera" aria-describedby="basic-addon4" />
             </span>
        </div>

        <div th:if="${product.productId} eq null" id="imgDiv1" style="display: none;"></div>
        <div th:if="${product.productId} ne null" id="imgDiv1" style="display: block;">
            <div th:each="prod : ${product.certList}">
                <div style="margin-top: 20px;border:1px solid #5a44593d;width: 70%;">
                    <img th:src="${#request.getContextPath()+'/'+staticAccessPath}+${prod.picUrl}" style="width:137px;height:70px;margin-right:80px" th:value="${prod.picId}"/>
                    <!--<button type="button" class="btn btn-warning cancel" onclick="delPic(this)"> <i class="glyphicon glyphicon-ban-circle"></i><span>取消</span> </button>-->
                    <button type="button" onclick="delPic(this)" class="btn btn-warning cancel" > <i class="glyphicon glyphicon-ban-circle"></i> <span>取消</span> </button>
                </div>
            </div>
        </div>
    </div>
    <br />

    <div class="menu">
        <span id="basic-addon4">产品图片</span>
    </div>
    <div class="kong">
        <div id="productImgDiv">
             <span class="btn btn-success fileinput-button" style="color: #fff;background-color: #5cb85c;border-color: #4cae4c;">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>添加文件...</span>
                    <input  style="margin-bottom: 2%;" id="productImg" name="productImgTemp"  type="file" capture="camera" aria-describedby="basic-addon4" />
             </span>
        </div>
        <!--<button type="button" id="productImgBtn" style="width:100px;border-radius:6px;border-width:1px;border-style:solid;border-color:#0b6cbc;">上传</button>-->
        <div th:if="${product.productId} eq null" id="imgDiv2" style="display: none;"></div>

        <div th:if="${product.productId} ne null" id="imgDiv2" style="display: block;">
            <div th:each="prod : ${product.imgList}">
                <div style="margin-top: 20px;border:1px solid #5a44593d;width: 70%;">
                    <img th:src="${#request.getContextPath()+'/'+staticAccessPath}+${prod.picUrl}" style="width:137px;height:70px;margin-right:80px" th:value="${prod.picId}"/>
                    <!--<button type="button" class="btn btn-warning cancel" onclick="delPic(this)"> <i class="glyphicon glyphicon-ban-circle"></i><span>取消</span> </button>-->
                    <button type="button" onclick="delPic(this)" class="btn btn-warning cancel" > <i class="glyphicon glyphicon-ban-circle"></i> <span>取消</span> </button>
                </div>
            </div>
        </div>

    </div>
    <br />
    <div class="menu">
        <span id="basic-addon5">产品描述</span>
    </div>
    <div class="kong">
        <textarea class="required" id="productDescription" name="productDescription" rows="5" cols="25" type="textarea" placeholder="产品描述" aria-describedby="basic-addon5" th:text="${product.productDescription}"></textarea>
    </div>
    <br />
        <div class="menu"></div>
        <div class="kong" >
        <button class="btn btn-primary" th:if="${product.productId} eq null" type="button" id="productFormSubmitButton" >添 加</button>
        <button class="btn btn-primary" th:if="${product.productId} ne null" type="button" id="productFormSubmitButton" >修 改</button>
        <button class="btn btn-default" type="button" id="backButton">返回</button>

        </div>
    </div>
</form>

</body>
</html>